<template>
	<view>
		<view class="top">
			<view class="top_left" v-if="classList.length > 0">
				<view class="top_left_text">{{ classList[class_index].group_name }}</view>
				<picker @change="bindPickergroupid" :value="class_index" :range="classList" range-key="group_name" class="xuanzhan"><i
					 class="iconfont iconfanhui"></i></picker>
			</view>
			<view class="top_right">
				<uni-search-bar placeholder="请输入用户名称" radius="30" @input="search"></uni-search-bar>
			</view>
		</view>
		<view class="clildView">
			<view class="child-left" v-if="childList.length > 0" @click="gotohd()">
				<view v-if="childList[childIndex].avatar" class="stuAvatar">
					<view class="msgnum" v-if="childList[childIndex].num > 0">{{childList[childIndex].num}}</view>
					<!-- <image :src="childList[childIndex].avatar"></image> -->
					<headimg :realSrc="childList[childIndex].avatar"></headimg>
				</view>
				<view class="child-info">
					<view>{{ childList[childIndex].nicheng ? childList[childIndex].nicheng : '你的孩子' }}</view>
				</view>
			</view>
			<view class="child-right" @tap="switchClick">
				切换
				<i class="iconfont iconfanhui"></i>
			</view>
		</view>
		<view class="pop" v-if="isPop">
			<view class="popItem" v-for="(item, index) in childList" :key="index" @tap="childClick(index)">
				<view class="popName" :class="childIndex == index ? 'popName_active' : ''">{{ item.nicheng }}</view>
				<i class="iconfont iconduigou" v-if="childIndex == index"></i>
			</view>
		</view>

		<view class="teacherView">
			<view class="teacher-item" v-for="(item, index) in userList" :key="index" @click="gotohdtc(index)">
				<view class="teacher-left">
					<view class="teacher-item_image">
						<!-- <image :src="item.avatar ? item.avatar : defimg"></image> -->
						<headimg :realSrc="item.avatar"></headimg>
					</view>
					<text>{{ item.nicheng ? item.nicheng : '未设置昵称' }}</text>
				</view>
				<view class="teacher-right">
					<view class="news" v-if="item.num > 0">{{ item.num }}</view>
					{{ item.teach_subject_name ? item.teach_subject_name : '未知' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue'
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	import util from '@/common/util.js';
	export default {
		components: {
			uniSearchBar,
			headimg
		},
		data() {
			return {
				childList: [], //孩子列表
				childDetail: {}, //孩子详情
				childIndex: 0, //孩子列表索引
				isPop: false,
				classList: [], //班级列表
				class_index: 0,
				searchText: '', //搜索文本
				userList: [], //教师列表
				defimg: this.defimg
			};
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: 'news'
			});
		},

		onLoad() {
			this.getChild();
		},

		onShow() {
			uni.closeSocket();
			var _this = this;
			uni.connectSocket({
				url: 'ws://' + this.sevenUrl + '/private/message?token=' + uni.getStorageSync('token'),
				success: function(res) {
					// uni.showToast({
					// 	title: '连接成功',
					// 	icon:'noen'
					// });
					_this.sevenintervalID = setInterval(function() {
						uni.sendSocketMessage({
							data: 'ping',
							success: function(res) {},
							fail: function(res) {}
						});
					}, 10000);
				},
				fail: function(res) {
					// uni.showToast({
					// 	title:'连接失败'+JSON.stringify(res),
					// 	icon:'none'
					// })
				}
			});
			this.listenMessage();
			this.setData();
		},
		onUnload() {
			console.log('onUnload');

			uni.closeSocket();
			clearInterval(this.sevenintervalID);
			uni.onSocketClose(function(res) {
				// uni.showToast({
				// 	title: 'WebSocket 已关闭！',
				// 	icon:'none'
				// });
			});
		},
		methods: {
			listenMessage: function() {
				var _this = this;
				uni.onSocketMessage(function(res) {
					if (res.data != 'ping') {
						console.log('收到服务器内容1：' + res.data);
						var data = JSON.parse(res.data);
						// uni.showToast({
						// 	title: JSON.stringify(data),
						// 	icon: 'none'
						// });
						if (data.code == 222) {
							data = data.data;
							var arr = [];
							for (let index in data) {
								console.log(data[index]);
								arr = arr.concat(data[index]);
							}
							util.Savemsg(arr, true, false);
						} else if (data.code == 220) {
							var arr = [];
							arr.push(data.data);
							util.Savemsg(arr, true, false);
						}
						_this.setData();
					}
				});
			},
			setData: function() {
				this.userList.forEach((item, index) => {
					var key = this.classList[this.class_index].groupid + 'usr_type' + item.users_type + 'user' + item.user_id;
					item.num = uni.getStorageSync(key) ? uni.getStorageSync(key).num : 0;
				});
				this.childList.forEach((item, index) => {
					var key = this.classList[this.class_index].groupid + 'usr_type1user' + item.student_id;
					item.num = uni.getStorageSync(key) ? uni.getStorageSync(key).num : 0;
				});
				this.$forceUpdate();
			},
			bindPickergroupid: function(e) {
				this.class_index = e.target.value;
				this.getTeacher();
			},
			/* 获取孩子列表 */
			getChild() {
				this.$zapi.apiPost('user/currency.Parents/childlist').then(res => {
					if (res.data.code == 200 && res.data.data) {
						this.childList = res.data.data;
						// this.childDetail = this.childList[0];
						this.getClass();
					} else {
						this.childList = [];
					}
					this.$forceUpdate();
				});
			},
			/* 获取班级列表 */
			getClass() {
				this.$zapi.apiPost('user/Grade.User/GradeList', {
					student_id: this.childList[this.childIndex].student_id
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						this.classList = res.data.data;
						this.getTeacher();
					} else {
						this.classList = [];
					}
				});
			},
			/* 获取教师列表 */
			getTeacher() {
				var data = {
					groupid: this.classList[this.class_index].groupid,
					users_type: 2,
					student_id: this.childList[this.childIndex].student_id
				};
				if (this.searchText != '') {
					data.nicheng = this.searchText;
				}
				this.$zapi.apiPost('user/userlist.Lists/searchTcStu', data).then(res => {
					if (res.data.code == 200 && res.data.data) {
						this.userList = res.data.data;
						this.setData();
					}
					this.$forceUpdate();
				});
			},
			/* 孩子列表展开&收缩 */
			switchClick() {
				this.isPop = !this.isPop;
			},
			/* 切换孩子 */
			childClick(index) {
				this.childIndex = index;
				// this.childDetail = this.childList[index];
				this.isPop = false;
				this.getClass();
			},

			/* 搜索 */
			search(e) {
				this.searchText = e.value;
				this.getTeacher();
			},
			/* 跳转和孩子互动*/
			gotohd: function() {
				uni.navigateTo({
					url: 'online-service?groupid=' +
						this.classList[this.class_index].groupid +
						'&user_id=' +
						this.childList[this.childIndex].student_id +
						'&nicheng=' +
						this.childList[this.childIndex].nicheng +
						'&user_type=1'
				});
			},
			gotohdtc: function(index) {
				var Tcdata = this.userList[index];
				this.userList[index].num = 0;
				this.$forceUpdate();
				uni.navigateTo({
					url: 'online-service?groupid=' + Tcdata.groupid + '&user_id=' + Tcdata.user_id + '&user_type=' + 2 +
						'&nicheng=' + Tcdata.nicheng
				});

				// uni.setStorageSync('QaAgroupid',Tcdata.groupid);
				// uni.setStorageSync('groupType',2)
				// uni.navigateTo({
				// 	url:'courseessay?user_id='+this.childDetail.student_id+'&nicheng='+
				// 	this.childDetail.nicheng+'&users_type=2&tc_user_id='+Tcdata.user_id+'&tc_nicheng='+Tcdata.nicheng
				// })
			}
		}
	};
</script>

<style>
	page {
		background: #fafafa;
	}

	.top {
		position: fixed;
		left: 0;
		width: 100%;
		height: 100upx;
		background: #ffffff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 1;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
	}

	.top_left {
		width: 30%;
		padding: 0 30rpx;
		display: flex;
		justify-content: flex-start;
	}

	.top_left_text {
		font-size: 32upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.top_left i {
		transform: rotate(90deg);
	}

	.top_right {
		width: 70%;
	}

	.uni-searchbar {
		padding: 0 30upx !important;
		width: 100% !important;
		box-sizing: border-box !important;
		position: relative !important;
		top: 0;
	}

	/* 孩子信息 */
	.clildView {
		background: #ffffff;
		padding: 44upx 30upx 28upx;
		width: 690upx;
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 1;
		/* #ifdef APP-PLUS */
		top: 100upx;
		/* #endif */
		/* #ifdef H5 */
		top: 188upx;
		/* #endif */
	}

	.child-left,
	.child-right {
		display: inline-flex;
		align-items: center;
	}

	.child-left image {
		width: 64upx;
		height: 64upx;
		border-radius: 50%;
		margin-right: 12upx;
		margin-top: 18upx;
	}

	.child-info view {
		color: #333333;
		font-size: 34upx;
		line-height: 1;
		margin-top: 10upx;
	}

	.child-info text {
		color: #ff9900;
		font-size: 26upx;
	}

	.child-right {
		color: #ff9900;
		font-size: 26upx;
	}

	.child-right i {
		color: #999999;
		font-size: 20upx;
		margin-left: 10upx;
	}

	/* 蒙版 */
	.pop {
		position: fixed;
		background: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: calc(100% - 266upx);
		z-index: 1;
		/* #ifdef APP-PLUS */
		top: 236upx;
		/* #endif */
		/* #ifdef H5 */
		top: 324upx;
		/* #endif */
	}

	.popItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		width: 670upx;
		padding: 0 40upx;
		background: #ffffff;
	}

	.popName {
		color: #333333;
		font-size: 34upx;
	}

	.popName_active {
		color: #ff9900;
	}

	.popItem i {
		color: #ff9900;
		font-size: 24upx;
	}

	/* 内容 */
	.teacherView {
		position: absolute;
		top: 266upx;
		left: 0;
		margin-bottom: 120upx;
	}

	.teacher-item {
		height: 100upx;
		line-height: 100upx;
		background: #ffffff;
		padding: 0 30upx;
		width: 690upx;
		margin-top: 10upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.teacher-item {
		margin-top: 0;
		padding: 0 80upx 0 30upx;
		width: 640upx;
	}

	.teacher-item_image {
		width: 64upx;
		height: 64upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.teacher-left {
		color: #333333;
		font-size: 32upx;
		display: flex;
		align-items: center;
	}

	.teacher-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #999999;
	}

	.news {
		height: 40upx;
		min-width: 40upx;
		border-radius: 40upx;
		background: red;
		text-align: center;
		line-height: 40upx;
		color: #fff;
		margin-right: 30upx;
	}

	.stuAvatar {
		width: 64upx;
		height: 64upx;
		margin-right: 20upx;
	}

	.msgnum {
		position: absolute;
		left: 66upx;
		color: #FFFFFF;
		line-height: 26upx;
		text-align: center;
		width: 26upx;
		height: 26upx;
		background-color: #FF3333;
		border-radius: 20upx;
	}
</style>
